<sqx-title message="i18n:rules.listPageTitle" />
<sqx-layout innerWidth="54" layout="main" titleIcon="rules" titleText="i18n:common.rules">
    <ng-container menu>
        <button class="btn btn-text-secondary" (click)="reload()" shortcut="CTRL + B" title="i18n:rules.refreshTooltip" type="button">
            <i class="icon-reset"></i> {{ "common.refresh" | sqxTranslate }}
        </button>
        @if (rulesState.canCreate | async) {
            <a class="btn btn-success ms-2" routerLink="new" shortcut="CTRL + U" title="i18n:rules.createTooltip">
                <i class="icon-plus"></i> {{ "rules.create" | sqxTranslate }}
            </a>
        }
    </ng-container>
    <ng-container>
        <sqx-list-view innerWidth="54rem" [isLoading]="rulesState.isLoading | async">
            @if (rulesState.runningRule | async; as runningRule) {
                <div class="alert alert-danger d-flex justify-content-between align-items-center p-2 ps-4 mb-4">
                    {{ "rules.runningRule" | sqxTranslate: { name: runningRule.name || "Unnamed Rule" } }}
                    <a class="btn" (click)="cancelRun()">{{ "common.cancel" | sqxTranslate }}</a>
                </div>
            }

            @if (availableSteps && availableTriggers && (rulesState.isLoaded | async) && (rulesState.rules | async); as rules) {
                @for (rule of rules; track rule.id) {
                    <sqx-rule
                        [availableSteps]="availableSteps"
                        [availableTriggers]="availableTriggers"
                        (delete)="delete(rule)"
                        [rule]="rule"
                        (toggle)="toggle(rule)" />
                } @empty {
                    <div class="table-items-row table-items-row-summary table-items-row-empty">
                        {{ "rules.empty" | sqxTranslate }}
                        @if (rulesState.canCreate | async) {
                            <button class="btn btn-success btn-sm ms-1" routerLink="new" type="button">
                                <i class="icon icon-plus"></i> {{ "rules.emptyAddRule" | sqxTranslate }}
                            </button>
                        }
                    </div>
                }
            }
        </sqx-list-view>
    </ng-container>
    <ng-template sidebarMenu>
        <div class="panel-nav">
            @if (rulesState.canReadEvents | async) {
                <a
                    class="panel-link panel-link-gray"
                    attr.aria-label="{{ 'common.history' | sqxTranslate }}"
                    routerLink="events"
                    routerLinkActive="active"
                    sqxTourStep="history"
                    title="i18n:common.history"
                    titlePosition="left">
                    <i class="icon-time"></i>
                </a>
            }
            <a
                class="panel-link"
                #helpLink
                attr.aria-label="{{ 'common.help' | sqxTranslate }}"
                hintAfter="180000"
                hintText="i18n:common.helpTour"
                queryParamsHandling="preserve"
                replaceUrl="true"
                routerLink="help"
                routerLinkActive="active"
                sqxTourStep="help"
                title="i18n:common.help"
                titlePosition="left">
                <i class="icon-help2"></i>
            </a>
        </div>
    </ng-template>
</sqx-layout>
<router-outlet></router-outlet>
